﻿﻿@model WebApp.Models.Employee
<!-- 弹出编辑窗体表单 -->
<div id="employeedetailwindow" class="easyui-window"
     title="明细数据"
     data-options="modal:true,
                    closed:true,
                    minimizable:false,
                    collapsible:false,
                    maximized:false,
                    iconCls:'icon-more',
                    footer:'#windowfooter',
                    closeDuration:200,
                    closeAnimation:'slide',
                    openDuration:300,
                    openAnimation:'slide',
                    onBeforeClose:function(){
                      var that = $(this);
                      if(employeehasmodified()){
                        $.messager.confirm('确认','你确定要放弃保存修改的记录?',function(r){
                        if (r){
                          var opts = that.panel('options');
                          var onBeforeClose = opts.onBeforeClose;
                          opts.onBeforeClose = function(){};
                          that.panel('close');
                          opts.onBeforeClose = onBeforeClose;
                          hook = false;
                        }
                        });
                        return false;
                      }
                    },
                    onOpen:function(){
                       $(this).window('vcenter');
                       $(this).window('hcenter');
                    },
                    onRestore:function(){
                    },
                    onMaximize:function(){
                    }
                    " style="width:800px;height:450px;display:none">
  <!-- toolbar -->
  <div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0  text-muted">
    <div class="row m-0">
      <div class="col-sm-8">
        <div class="btn-group btn-group-sm">
          <button name="saveitembutton" onclick="saveemployeeitem()" class="btn btn-default">
            <i class="fal fa-save"></i> @Html.L("Save")
          </button>
        </div>
        <div class="btn-group btn-group-sm" id="deleteitem-btn-group">
          <button onclick="deleteemployeeitem()" class="btn btn-danger">
            <i class="fal fa-times"></i> @Html.L("Delete")
          </button>
        </div>

      </div>
      <div class="col-sm-4 text-align-right">

      </div>
    </div>
  </div>
  <!-- panel container form  -->
  <div class="panel-container show">
    <div class="panel-content">
      <form id="employee_form"
            class="easyui-form form-horizontal padding-10"
            method="post"
            data-options="novalidate:true,
                            onChange: function(target){
                              hook = true;
                              $('button[name*=\'saveitembutton\']').prop('disabled', false);
                             },
                             onLoadSuccess:function(data){
                               hook = false;
                               $('button[name*=\'saveitembutton\']').prop('disabled', true);
                             }">
        @Html.AntiForgeryToken()
        <!--Primary Key-->
        @Html.HiddenFor(model => model.Id)
        <fieldset class="form-group">
          <div class="row m-1">

            <!--姓名-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.Name)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.Name)"
                     name="@Html.NameFor(model => model.Name)"
                     value="@Html.ValueFor(model => model.Name)"
                     tabindex="0" required
                     class="easyui-textbox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.Name)',
								 required:true,
                                 validType: 'length[0,20]'
                                 " />
            </div>

            <!--职位-->
            <label class="col-md-2 mb-1 form-label text-right ">@Html.DisplayNameFor(model => model.Title)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.Title)"
                     name="@Html.NameFor(model => model.Title)"
                     value="@Html.ValueFor(model => model.Title)"
                     tabindex="1"
                     class="easyui-textbox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.Title)',
								 required:false,
                                 validType: 'length[0,30]'
                                 " />
            </div>


            <!--联系电话-->
            <label class="col-md-2 mb-1 form-label text-right ">@Html.DisplayNameFor(model => model.PhoneNumber)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.PhoneNumber)"
                     name="@Html.NameFor(model => model.PhoneNumber)"
                     value="@Html.ValueFor(model => model.PhoneNumber)"
                     tabindex="2"
                     class="easyui-textbox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.PhoneNumber)',
								 required:false,
                                 validType: 'length[0,30]'
                                 " />
            </div>

            <!--微信-->
            <label class="col-md-2 mb-1 form-label text-right ">@Html.DisplayNameFor(model => model.WX)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.WX)"
                     name="@Html.NameFor(model => model.WX)"
                     value="@Html.ValueFor(model => model.WX)"
                     tabindex="3"
                     class="easyui-textbox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.WX)',
								 required:false,
                                 validType: 'length[0,30]'
                                 " />
            </div>


            <!--性别-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.Sex)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.Sex)"
                     name="@Html.NameFor(model => model.Sex)"
                     value="@Html.ValueFor(model => model.Sex)"
                     tabindex="4" required
                     class="easyui-textbox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.Sex)',
								 required:true,
                                 validType: 'length[0,10]'
                                 " />
            </div>

            <!--年龄-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.Age)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.Age)"
                     name="@Html.NameFor(model => model.Age)"
                     value="@Html.ValueFor(model => model.Age)"
                     tabindex="5"
                     class="easyui-numberspinner"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.Age)',
								 required:true,formatter:intformatter,

                                 " />
            </div>


            <!--出生日期-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.Brithday)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.Brithday)"
                     name="@Html.NameFor(model => model.Brithday)"
                     value="@Html.ValueFor(model => model.Brithday)"
                     tabindex="6" required
                     class="easyui-datebox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.Brithday)',
								 required:true,
								 formatter:dateformatter" />
            </div>

            <!--入职日期-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.EntryDate)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.EntryDate)"
                     name="@Html.NameFor(model => model.EntryDate)"
                     value="@Html.ValueFor(model => model.EntryDate)"
                     tabindex="7" required
                     class="easyui-datebox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.EntryDate)',
								 required:true,
								 formatter:dateformatter" />
            </div>


            <!--是否已离职-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.IsDeleted)</label>
            <div class="col-md-4 mb-1">
              <div class="custom-control custom-checkbox">
                <input id="@Html.IdFor(model => model.IsDeleted)"
                       name="@Html.NameFor(model => model.IsDeleted)"
                       value="true" @(Model.IsDeleted ? "checked=\"checked\"" : "")
                       data-unchecked-value="false"
                       tabindex="8"
                       class="checkbox style-0"
                       type="checkbox" />
                <label class="custom-control-label" for="@Html.NameFor(model => model.IsDeleted)"> @Html.DisplayNameFor(model => model.IsDeleted)</label>
              </div>
            </div>

            <!--离职日期-->
            <label class="col-md-2 mb-1 form-label text-right ">@Html.DisplayNameFor(model => model.LeaveDate)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.LeaveDate)"
                     name="@Html.NameFor(model => model.LeaveDate)"
                     value="@Html.ValueFor(model => model.LeaveDate)"
                     tabindex="9"
                     class="easyui-datebox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.LeaveDate)',
								 required:false,
								 formatter:dateformatter" />
            </div>


            <!--公司-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.CompanyId)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.CompanyId)"
                     name="@Html.NameFor(model => model.CompanyId)"
                     value="@Html.ValueFor(model => model.CompanyId)"
                     tabindex="10" required
                     class="easyui-combobox"
                     style="width:100%"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.CompanyId)' ,
						required:true ,
						valueField: 'Id',
						textField:  'Name' ,
                        validateOnCreate:false,
                        validateOnBlur:true,
                        validType:'combocheck[\'#CompanyId\',\'请选择公司\']',
						url: '/Employees/GetCompanies' ,
						onSelect: function(item){
						  //console.log(item);
				        }">
            </div>

            <!--部门-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.DepartmentId)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.DepartmentId)"
                     name="@Html.NameFor(model => model.DepartmentId)"
                     value="@Html.ValueFor(model => model.DepartmentId)"
                     tabindex="11" required
                     class="easyui-combobox"
                     style="width:100%"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.DepartmentId)' ,
						required:true ,
						valueField: 'Id',
						textField:  'Name' ,
                        validateOnCreate:false,
                        validateOnBlur:true,
                        validType:'combocheck[\'#DepartmentId\',\'请选择部门\']',
						url: '/Employees/GetDepartments' ,
						onSelect: function(item){
						  //console.log(item);
				        }">
            </div>

          </div>
        </fieldset>
      </form>
      <!--========================================================================================-->
    </div>
    <!--end window body -->
    </div>
  </div>
  <div id="windowfooter" style="padding:5px;">&nbsp;</div>
  <!-- 弹出窗体form表单 -->
  <!-- 弹出编辑对话框 -->
  <!--begin popup detailview javascript block -->
  <script type="text/javascript">
    //判断新增编辑状态
    var MODELSTATE = 'Added';
    var employeeid = null;
    function openemployeedetailwindow(data, state) {
      MODELSTATE = state;
      initemployeedetailview();
      employeeid = (data.Id || 0);
      $('#employeedetailwindow').window('open');
      $('#employee_form').form('reset');
      $('#employee_form').form('load', data);
    }
    //删除当前记录
    function deleteemployeeitem() {
      $.messager.confirm('确认', '你确定要删除该记录?', result => {
        if (result) {
          const url = `/Employees/Delete/${employeeid}`;
          $.get(url).done(res => {
            if (res.success) {
              toastr.success("删除成功");
              $dg.datagrid('reload');
              $('#employeedetailwindow').window('close');
            } else {
              $.messager.alert('错误', res.err, 'error');
            }
          });
        }
      });
    }
    //async 保存数据
    async function saveemployeeitem() {
      const $employeeform = $('#employee_form');
      if ($employeeform.form('enableValidation').form('validate')) {
        let employee = $employeeform.serializeJSON();
        let url = '/Employees/Edit';
        //判断是新增或是修改方法
        if (MODELSTATE === 'Added') {
          url = '/Employees/Create';
        }
        var token = $('input[name="__RequestVerificationToken"]', $employeeform).val();
        $.messager.progress({ title: '请等待', msg: '正在保存数据...', interval: 200 });
        $.ajax({
          type: "POST",
          url: url,
          data: {
            __RequestVerificationToken: token,
            employee: employee
          },
          dataType: 'json',
          contentType: 'application/x-www-form-urlencoded; charset=utf-8'
        })
          .done(response => {
            $.messager.progress('close');
            if (response.success) {
              hook = false;
              $employeeform.form('disableValidation');
              $dg.datagrid('reload');
              $('#employeedetailwindow').window("close");
              toastr.success("保存成功");
            } else {
              $.messager.alert("错误", response.err, "error");
            }
          })
          .fail((jqXHR, textStatus, errorThrown) => {
            $.messager.progress('close');
            $.messager.alert('异常', `${jqXHR.status}: ${jqXHR.statusText} `, 'error');
          });
      }
    }
    //关闭窗口
    function closeemployeedetailwindow() {
      $('#employeedetailwindow').window('close');
    }
    //todo
    function todo() {
      console.log('todo.....');
    }
    //判断是否有没有保存的记录
    function employeehasmodified() {
      return hook;

    }


    function initemployeedetailview() {
      //判断是否显示功能按钮
      if (MODELSTATE === 'Added') {
        $('#deleteitem-btn-group').hide();
      } else {
        $('#deleteitem-btn-group').show();
      }

      //回车光标移动到下个输入控件
      //如果是枚举类型需要把numberbox改成combobox
      //年龄
      $('#Age').numberbox('textbox').bind('keydown', function (e) {
        if (e.keyCode == 13) {
          $(e.target).emulateTab();
        }
      });
      //日期类型 出生日期
      $('#Brithday').datebox('textbox').bind('keydown', function (e) {
        if (e.keyCode == 13) {
          $(e.target).emulateTab();
        }
      });
      //日期类型 入职日期
      $('#EntryDate').datebox('textbox').bind('keydown', function (e) {
        if (e.keyCode == 13) {
          $(e.target).emulateTab();
        }
      });
      //日期类型 离职日期
      $('#LeaveDate').datebox('textbox').bind('keydown', function (e) {
        if (e.keyCode == 13) {
          $(e.target).emulateTab();
        }
      });
      //公司默认外键使用combobox,也可以使用combogrid
      $('#CompanyId').combobox('textbox').bind('keydown', function (e) {
        if (e.keyCode == 13) {
          $(e.target).emulateTab();
        }
      });
      //部门默认外键使用combobox,也可以使用combogrid
      $('#DepartmentId').combobox('textbox').bind('keydown', function (e) {
        if (e.keyCode == 13) {
          $(e.target).emulateTab();
        }
      });
    }
  </script>

